<?php
/*
 * This page will show list of Members with details.
 */
include 'db/users.php';
$u = new Users();
$users = $u->getUsers("Member");
$json = json_encode($users);
//echo '<pre>';
//print_r($json);
echo '<script>fillTable(' . $json . ');</script>';
//echo '</pre>';
?>

<title>Members</title>
<div class="btn-toolbar">    
    <a href="#addNewUser" class="btn btn-primary" role="button" data-toggle="modal">Add New Member</a>
</div>
<div class="well">
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Role</th>
                <th style="width: 36px;"></th>
            </tr>
        </thead>
        <tbody> 

        </tbody>
    </table>
</div>
<!--<div class="pagination">
    <ul>
        <li><a href="#">Prev</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</div>-->

<!--Remove User-->
<div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Delete Confirmation</h3>
    </div>
    <div class="modal-body">
        <p class="error-text">Are you sure you want to delete the user?</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-danger" onclick="removeUser();" data-dismiss="modal">Delete</button>
    </div>
</div>
<!--Add User-->
<div class="modal small hide fade" id="addNewUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Add New Member</h3>
    </div>
    <div class="modal-body">
        <div class="span4" style="margin-left: 14%;">            
            <label>First Name</label>
            <input type="text" name="fname" class="span4" />
            <label>Last Name</label>
            <input type="text" name="lname" class="span4" />
            <label>Email Address</label>
            <input type="email" name="email" class="span4" />
            <label>User Type</label>
            <input type="text" name="type" value="Member" readonly class="span4" />
            <input type="submit" onclick="saveUser();" value="Add" class="btn btn-primary" style="float: right;">
            <!--                <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>-->
            <div class="clearfix"></div>            
        </div>
    </div>    
</div>
<!--Update User-->
<div class="modal small hide fade" id="updateUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Add New Member</h3>
    </div>
    <div class="modal-body">
        <div class="span4" style="margin-left: 14%;">            
            <label>First Name</label>
            <input type="text" name="fname" class="span4" />
            <label>Last Name</label>
            <input type="text" name="lname" class="span4" />
            <label>Email Address</label>
            <input type="email" name="email" class="span4" />
            <label>User Type</label>
            <input type="text" name="type" value="Member" readonly class="span4" />
            <input type="submit" onclick="updateUser();" value="Add" class="btn btn-primary" style="float: right;">
            <!--                <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>-->
            <div class="clearfix"></div>            
        </div>
    </div>    
</div>
<script>
    var id;
    $(document).ready(function(){
        $(".removeUser").click(function(){            
            id = $(this).attr('data-id');            
        });
        $(".updateUser").click(function(){            
            id = $(this).attr('data-id');
            $("#updateUser input[name=fname]").val(fullJson.user[id].fname);
            $("#updateUser input[name=lname]").val(fullJson.user[id].lname);
            $("#updateUser input[name=email]").val(fullJson.user[id].email);
        });
    });
    
    function updateUser(){
        var fname = $("#updateUser input[name=fname]").val();
        var lname = $("#updateUser input[name=lname]").val();
        var email = $("#updateUser input[name=email]").val();
        var type = $("#updateUser input[name=type]").val();              
        var status = validateAllFields(fname,lname,email);          
        if(status){
            $('#updateUser').modal('hide');
            $.get('db/codeProcess.php',{
                action : "UPDATE_USER",
                id : fullJson.user[id].id,
                fname : fname,
                lname : lname,
                email : email,
                type : type
            },function(data){
                console.log(data);
                loadContent('membersMenu');
            });
        }
    }
    
    
    function saveUser(){        
        var fname = $("#addNewUser input[name=fname]").val();
        var lname = $("#addNewUser input[name=lname]").val();
        var email = $("#addNewUser input[name=email]").val();
        var type = $("#addNewUser input[name=type]").val();              
        var status = validateAllFields(fname,lname,email);          
        if(status){
            $('#addNewUser').modal('hide');
            $.get('db/codeProcess.php',{
                action : "CREATE_NEW_USER",
                fname : fname,
                lname : lname,
                email : email,
                type : type
            },function(data){
                loadContent('membersMenu');
            });
        }
        
    }
    
    function validateAllFields(fname,lname,email){              
        var status = true;
        var message = "Please Enter: \n";
        if(fname==undefined || fname==null || fname=="" ){
            message+="First Name\n";
            status = false;
        }
        if(lname==undefined || lname==null || lname=="" ){
            message+="Last Name \n";
            status = false;
        }
        if(email==undefined || email==null || email==""){
            message+="Email";
            status = false;
        }
        if(!status){
            alert(message);            
        }
        return status;
    }
    
    function removeUser(){
        $.get('db/codeProcess.php',{
            action : "DELETE_USER",
            id : id
        },function(data){            
            $('#myModal').modal('hide');
            loadContent('membersMenu');
        });
    }
</script>